<!DOCTYPE HTML>
<html>

<head>
   <title> 详情页</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="../../../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/page-min.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/jx-style.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <link href="../../../assets/css/my-style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="container">
    <div class="detail-page span24">
        <div class="detail-page-title">
            <h4>售后详情
                <button type="button" id="user-list-btn" class="pull-right jx-btn ">返回</button>
            </h4>

        </div>
        <div class="detail-section">
            <div class="row detail-row">
                <div class="span24">
                  <div class="btn-title clearfix">
                      <button type="button"class="pull-left change-btn btn-info" style="margin:0;">审核通过</button>
                      <button type="button"class="pull-left refuse-btn btn-info" style="margin:0;margin-left:30px;">审核拒绝</button>
                      <button type="button"class="pull-left revoke-btn btn-info" style="margin:0;margin-left:30px;">撤销</button>
                  </div>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">售后基础信息</td>
                        </thead>
                        <tr  colspan="4">
                            <td width="150">
                                <label class="pull-right">售后编号</label>
                            </td>
                            <td colspan="3">
                                E20180411092931076900007
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label class="pull-right">售后状态</label>
                            </td>
                            <td colspan="3" style="color:red;">
                                售后申请已提交，等待商家审核
                            </td>
                        </tr>
                        <tr >
                            <td width="150">
                                <label class="pull-right">申请时间</label>
                            </td>
                            <td>
                              2018-03-14 12:12:11
                            </td>
                            <td width="150">
                                <label class="pull-right">审核时间</label>
                            </td>
                            <td>
                              2018-03-14 12:12:11
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">撤销时间</label>
                            </td>
                            <td>
                            </td>
                            <td width="150">
                                <label class="pull-right">完成时间</label>
                            </td>
                            <td>
                            </td>
                        </tr>
                    </table>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">
                            退货信息
                        </td>
                        </thead>
                        <tr >
                            <td width="150">
                                <label class="pull-right">退货原因</label>
                            </td>
                            <td>
                              质量问题
                            </td>
                            <td width="150">
                                <label class="pull-right">售后类型</label>
                            </td>
                            <td>
                              退货退款
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">退款金额</label>
                            </td>
                            <td>
                              ¥899
                            </td>
                            <td width="150">
                                <label class="pull-right">退运费</label>
                            </td>
                            <td>
                              ¥10
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">联系方式</label>
                            </td>
                            <td colspan="3">
                              15921172492
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">退款说明</label>
                            </td>
                            <td colspan="3">
                              商品质量与描述不符，要求退款。
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">图片凭证</label>
                            </td>
                            <td colspan="3">
                              <img src="./../../assets/img/u9486.png" alt="" style="width:60px;height:60px;margin-left:10px;">
                              <img src="./../../assets/img/u9486.png" alt="" style="width:60px;height:60px;margin-left:10px;">
                              <img src="./../../assets/img/u9486.png" alt="" style="width:60px;height:60px;margin-left:10px;">
                            </td>
                        </tr>
                    </table>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">关联订单信息</td>
                        </thead>
                        <tr  colspan="4">
                            <td width="150">
                                <label class="pull-right">订单编号</label>
                            </td>
                            <td colspan="3">
                                E20180411092931076900007
                            </td>
                        </tr>
                        <tr >
                            <td width="150">
                                <label class="pull-right">支付方式</label>
                            </td>
                            <td>
                              微信支付
                            </td>
                            <td width="150">
                                <label class="pull-right">支付时间</label>
                            </td>
                            <td>
                              2018-03-14 12:12:11
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label class="pull-right">支付编号</label>
                            </td>
                            <td colspan="3">
                                E12662656326596582000002
                            </td>
                        </tr>
                        <tr>
                            <td width="150">
                                <label class="pull-right">下单用户账号</label>
                            </td>
                            <td>
                                wx_37236434784
                            </td>
                            <td width="150">
                                <label class="pull-right">下单用户手机</label>
                            </td>
                            <td>
                                18916043882
                            </td>
                        </tr>
                    </table>
                    <table id="" class="table table-header table-condensed table-bordered">
                        <thead>
                        <td colspan="4">
                            订单配送信息
                        </td>
                        </thead>
                        <tr  colspan="4">
                            <td width="150">
                                <label class="pull-right">配送方式</label>
                            </td>
                            <td colspan="3">
                            </td>
                        </tr>
                        <tr  colspan="4">
                            <td width="150">
                                <label class="pull-right">配送信息</label>
                            </td>
                            <td colspan="3">
                                上海市 上海市 浦东新区 锦绣东路2777号34号楼7楼前台, 王兴, 13817093694
                                <button type="button" class="ml-10 pull-right button">编辑</button>
                                <button type="button" class="ml-10 pull-right button">复制</button>
                            </td>
                        </tr>
                        <tr  colspan="4">
                            <td width="150">
                                <label class="pull-right">买家留言</label>
                            </td>
                            <td colspan="3">
                            </td>
                        </tr>
                    </table>
                    <!-- 表格 start-->
                    <div>
                        <div class="grid-header">售后商品信息</div>
                        <div id="grid"></div>
                    </div>
                    <!-- 表格 end-->
                    <div class="record">
                        <div class="record-title">协商记录</div>
                        <h3>买家<span>2018-04-23 15:30</span></h3>
                        <p>买家发起了退款申请，等待卖家处理</p>
                        <p><span>退款原因：</span>质量问题</p>
                        <p><span>售后类型：</span>退货退款</p>
                        <p><span>退款说明：</span>质量与描述不符，要求退货</p>
                        <p><span>联系方式：</span>15921172492</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 初始隐藏 refuseDialog内容 -->
<div id="refuse" class="hide">
    <form class="form-horizontal">
        <div id="refuseform" class="row">
            <div class="control-group span12">
                <label class="control-label">原因：</label>
                <div class="control-row4 ">
                    <textarea class="input-large" type="text"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript" src="../../../assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="../../../assets/js/bootstrap.js"></script>
<script type="text/javascript" src="../../../assets/js/bui-min.js"></script>
<script type="text/javascript" src="../../../assets/js/config-min.js"></script>
<script type="text/javascript">
    BUI.use('common/page');
</script>
<script type="text/javascript">
    BUI.use(['bui/grid', 'bui/data', 'common/search', 'bui/overlay', 'bui/form'], function (Grid, Data, Search, Overlay, Form) {
        var Grid = Grid,
            Store = Data.Store,
            columns = [{
                title: '商品',
                dataIndex: 'a',
                elCls: 'td-pro', //居中
                width: 300,
                renderer: function (value, obj) {
                        return '<div class="td-inner">' +
                        '  <img class="pro-img"   src="../../../assets/img/u9486.png" alt="">' +
                        '  <div class="pro-info  ml-10">' +
                        '      <p>New Balance/NB 247系列 男鞋复古鞋运动休闲鞋MRL247WK[商品交易快照]</p>' +
                        '      <p style="color:#AEAEAE;">商品编号：MRL247WK</p>' +
                        '      <p style="color:#AEAEAE;">规格：8.5</p>' +
                        '  </div>' +
                        '</div>'
                  }
            }, {
                title: '价格(元)',
                dataIndex: 'b',
                elCls: 'center', //居中
                width: 100
            }, {
                title: '返佣(元)',
                elCls: 'center',
                dataIndex: 'c',
                width: 100
            }, {
                title: '数量',
                elCls: 'center',
                dataIndex: 'd',
                width: 100
            }, {
                title: '小记(元)',
                elCls: 'center',
                dataIndex: 'e',
                width: 100
            }, {
                title: '返佣小计(元)',
                elCls: 'center',
                dataIndex: 'f',
                width: 100
            }, {
                title: '状态',
                elCls: 'center',
                dataIndex: 'g',
                width: 100
            }],
            data = [{
                id: 1,
                a: '',
                b: '459.00',
                c: '59.00',
                d: '1',
                e: '459.00',
                f: '59.00',
                g: '待收货'
            }];

        //初始化数据 
        var isAddRemote = false,
            editing = new Grid.Plugins.DialogEditing({
                contentId: 'content', //设置隐藏的Dialog内容
                triggerCls: 'change-btn', //触发显示Dialog的样式
                editor: {
                    title: '商品数量'
                }
            }),
            store = new Store({ //初始化数据
                data: data,
                autoLoad: true, //自动加载数据
                pageSize: 2 // 配置分页数目
            }),
            grid = new Grid.Grid({
                render: '#grid',
                elCls: 'small-bui-grid-table mb-20',
                columns: columns,
                loadMask: true, //加载数据时显示屏蔽层

                bbar: {
                    // pagingBar:表明包含分页栏
                    pagingBar: true
                },
                plugins: [editing], //插件
                store: store
            });

        grid.render();
        //拒绝
        var refuseDialog = new Overlay.Dialog({
            title: '拒绝原因',
            width: 500,
            //配置DOM容器的编号
            contentId: 'refuse',
            success: function () {
                //点击成功时候操作
                this.close();
            }
        });
        $('.refuse-btn').on('click', function () {
            refuseDialog.show();
        });
    });
</script>
   <body>

</html>